extends /layout

block declarations
    - additional_title      = lingua.movies;
    - body_class            = 'appMovies';
    - use_angular           = true;
    - angular_app           = "movieApp";
    - angular_body_ctrl     = "movieCtrl";
    - angular_body_class    = "{playing:mediaPlayer.playing}";

block additional_css
    link(href="/core/css/video-js.css", rel="stylesheet")
    link(rel='stylesheet', href='/movies/css/style.css')

block additional_scripts
    script(src="/core/js/plugins/angular/angular-ui/ui-bootstrap-tpls-0.11.0.js")
    script(src="/core/js/plugins/video.js")
    script(src="/movies/js/app.js")
    script(src="/core/js/video.js")
    script(src="/movies/js/remote.js")

block body
    header
        .container
            .row
                .col-md-12
                    a.backlink(href="/") &#xe113;
                    h1.hidden-xs #{lingua.movies}
                    input#search.pull-right(ng-model="query.$", type="text", placeholder="Search", ng-show="movies")
                    #view-select(ng-hide="!movies")
                        label.view-select(for="showhidden", ng-init="query.hidden='false'", ng-click="query.hidden = query.hidden == 'false' ? '' : 'false'")
                            | {{query.hidden ? "Show" : "Hide"}} Hidden                    
    .container-fluid
        .row(mcjs-library)
            mcjs-movie(movie="movie", ng-repeat="movie in movies | filter:query  | orderBy: 'title' ", ng-cloak)

        h2.loading(ng-show="!movies") #{lingua.loading}
            mcjs-progress(percent="serverMessage")
            {{serverStatus}}
        h2.loading(ng-show="movies.result === 'none'") No data found, please check the movie filepath

    video#player.video-js.vjs-default-skin(width="100%", height="100%", ng-show="mediaPlayer.playing", controls, preload="metadata")

    script(type="text/ng-template", id="editModal.html")
        .modal-header
            h1 Edit movie
        .modal-body
            div(class="alert alert-danger" role="alert", ng-show="errorMessage") {{errorMessage}}
            .form-horizontal
                .row
                    .form-group
                        img.col-md-offset-1(ng-src="{{current.posterPath}}", ng-show="current.posterPath !== original.posterPath")
                    .form-group
                        label.col-md-3.col-md-offset-1 Poster url path
                        input.col-md-7(type="text",name="poster_path",ng-model="current.posterURL",required)
                    .form-group
                        label.col-md-3.col-md-offset-1 Backdrop url path
                        input.col-md-7(type="text",name="backdrop_path",ng-model="current.backgroundURL",required)
                    .form-group
                        label.col-md-3.col-md-offset-1 Title
                        input.col-md-7(type="text",name="title",ng-model="current.title",required)
                    .form-group
                        label.col-md-3.col-md-offset-1 Year
                        input.col-md-7(type="text",name="year",ng-model="current.year",required)
                    .form-group
                        label.col-md-3.col-md-offset-1 Hidden
                        input.col-md-7.icon(type="checkbox",name="hidden",ng-model="current.hidden",required,ng-checked="current.hidden == 'true'")
        .modal-footer
            button.btn(ng-click="updateItem()") Fetch Metadata
            button.btn.pull-right(ng-click="$dismiss()") Cancel
            input.btn.pull-right(type="submit",value="Submit", ng-click="editItem()",required)

